<template>
  <panel :title="title">
    <el-button slot="btn" type="warning" size="mini" @click="saveShopData">保存</el-button>

    <el-form
      :model="shopForm"
      ref="shopForm"
      label-width="100px"
      class="demo-ruleForm"
    >
      <!-- 店铺名称 -->
      <el-form-item label="店铺名称">
        <el-input
          v-model="shopForm.name"
          placeholder="店铺名称"
          class="shopname"
        ></el-input>
      </el-form-item>

      <!-- 店铺公告 -->
      <el-form-item label="店铺公告">
        <el-input
          type="textarea"
          v-model="shopForm.bulletin"
          :rows="5"
        ></el-input>
      </el-form-item>

      <!-- 店铺头像 -->
      <el-form-item label="店铺头像" required>
        <el-upload
          class="avatar-uploader"
          :action="API + '/shop/upload'"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
        >
          <img
            v-if="shopForm.avatar"
            :src="API + shopForm.avatar"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>

      <!-- 店铺图片 -->
      <el-form-item label="店铺图片" required>
        <el-upload
          :action="API + '/shop/upload'"
          list-type="picture-card"
          :on-preview="handlePictureCardPreview"
          :on-remove="handleRemove"
          :on-success="handleSucess"
          :file-list="shopForm.pics"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
        <el-dialog :visible.sync="dialogVisible">
          <img width="100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
      </el-form-item>

      <!-- 配送费 -->
      <el-form-item label="配送费">
        <el-input-number
          v-model="shopForm.deliveryPrice"
          :min="0"
        ></el-input-number>
      </el-form-item>
      <!-- 配送时间 -->
      <el-form-item label="配送时间">
        <el-input-number
          v-model="shopForm.deliveryTime"
          :min="0"
        ></el-input-number>
      </el-form-item>
      <!-- 配送描述 -->
      <el-form-item label="配送描述">
        <el-select v-model="shopForm.description">
          <el-option value="蜂鸟专送"></el-option>
          <el-option value="美团外卖"></el-option>
          <el-option value="饿了么外卖"></el-option>
        </el-select>
      </el-form-item>
      <!-- 店铺评分 -->
      <el-form-item label="店铺评分">
        <el-rate v-model="shopForm.score" allow-half></el-rate>
      </el-form-item>
      <!-- 销量 -->
      <el-form-item label="销量">
        <el-input-number
          v-model="shopForm.sellCount"
          :min="0"
        ></el-input-number>
      </el-form-item>

      <!-- 活动 -->
      <el-form-item label="活动">
        <el-checkbox-group v-model="shopForm.supports">
          <el-checkbox label="在线支付满28减5" name="type"></el-checkbox>
          <el-checkbox label="VC无限橙果汁全场8折" name="type"></el-checkbox>
          <el-checkbox label="单人精选套餐" name="type"></el-checkbox>
          <el-checkbox label="特价饮品8折抢购" name="type"></el-checkbox>
          <el-checkbox label="单人特色套餐" name="type"></el-checkbox>
        </el-checkbox-group>
      </el-form-item>

      <!-- 营业时间 -->
      <el-form-item label="营业时间">
        <el-time-picker
          is-range
          v-model="shopForm.date"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          placeholder="选择时间范围"
        >
        </el-time-picker>
      </el-form-item>
    </el-form>
  </panel>
</template>

<script>
import Panel from "@/components/panel/Panel.vue";

// 引入接口工具函数
import { shopDetail, editShopData } from "@/api/shop";

import _ from 'lodash';

export default {
  components: {
    Panel,
  },
  data() {
    return {
      title: "店铺管理",
      API: "http://127.0.0.1:5000",
      shopForm: {
        id: "",
        name: "",
        bulletin: "",
        avatar: "",
        deliveryPrice: "",
        deliveryTime: "",
        description: "",
        score: 0,
        sellCount: "",
        supports: "",
        pics: [],
        date: [],
      },
      dialogVisible: false,
      dialogImageUrl: "",
      //   表单验证规则
    };
  },
  methods: {
    handleAvatarSuccess(res) {
      this.shopForm.avatar = res.imgUrl;
      this.$message({
        type: 'success',
        message: '上传头像成功'
      })
    },
    // 删除图片
    handleRemove(file) {

      let index = this.shopForm.pics.map(item => {
        return item.name
      }).indexOf(file.name)

      this.shopForm.pics.splice(index, 1)

    },
    handleSucess(res) {
       this.$message({
        type: 'success',
        message: '上传店铺图片成功'
      })

      this.shopForm.pics.push({
        name: res.imgUrl,
        url: this.API + res.imgUrl
      })
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    async getDetail() {
      try{
        let { data } = await shopDetail();
  
        data.pics = data.pics.map((item) => {
          return {
            name: item,
            url: this.API + item,
          };
        });
  
  
        this.shopForm = data;
        this.shopForm.date = [
          new Date(2016, 9, 10, 8, 40),
          new Date(2016, 9, 10, 9, 40),
        ];

      }catch(err) {
        console.log(err)
      }
    },
    async saveShopData() {
      let data = _.cloneDeep(this.shopForm);
        // 处理头像图片名
        data.avatar = data.avatar.substr(13)
        // 处理店铺图片名
        data.pics = data.pics.map(item => {
          return item.name.substr(13)
        })

        data.supports = JSON.stringify(data.supports);
        data.date = JSON.stringify(data.date);
        data.pics = JSON.stringify(data.pics);

      try {
        let res = await editShopData(data);
        console.log(res)
        if (res.data.code === 0) {
          this.$bus.$emit('renderAvatar')
        }

      }catch(err) {
        console.log(err)
      }
    }
  },
  created() {
    this.getDetail();
  },
};
</script>

<style lang="less" scoped>
.shopname {
  width: 350px;
}

/deep/.el-textarea__inner {
  width: 350px;
}

/deep/.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/deep/.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
/deep/.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 140px;
  height: 140px;
  line-height: 140px;
  text-align: center;
}
/deep/.avatar {
  width: 140px;
  height: 140px;
  display: block;
}

.shop-img {
  /deep/.avatar-uploader-icon {
    width: 140px;
    height: 140px;
    line-height: 140px;
  }
}

.el-checkbox-group {
  width: 380px;
}

/deep/.el-date-editor .el-range-separator {
  width: 20%;
}
</style>